<template>
		<view class="g-tag-wrap" >
			<!-- 高度塌陷补充的空元素 -->
			<view class="del-empty-height" v-show="clear"></view>
			<view class="g-tags"
				 :class="[Cpu_size,Cpu_type,Cpu_boder,Cpu_circle]">
				 <!-- g-tags-del的mini状态下表现不佳需重新设定样式 -->
				 <view class="g-tags-del"
					   :class="[size=='mini'&&'g-tags-del-mini']" 
					   v-show="clear"
					   @click="deltag"
					   >X
				</view>
				<view class="g-tags-content">
					<span :class="['iconfont','icon-'+icon ]"
						  class='g-tags-content-icon' 
						  :style="{color:iconColor}"></span>
					<text>{{title}}</text>
					<text><slot></slot></text>
				</view>
			</view>
		</view>
</template>

<script>
export default {
	name:'g-tags',
	data() {
		return {
			
		};
	},
	props: {
		title:{
			type:String,
		},
		type:{
			type:String,
			default:"success"
		},
		//尺寸
		size:{
			type:String,
			default:"middle"
		},
		//边框样式
		boder:{
			type:Boolean,
			default:false,
		},
		//圆形
		circle:{
			type:Boolean,
			default:false,
		},
		//标签图标颜色
		iconColor:{
			type:String,
			default:"#ffffff"
		},
		//标签的图标
		icon:{
			type:String
		},
		//是否可删除
		clear:{
			type:Boolean,
			default:false
		},
	},
	computed: {
		Cpu_size(){
			return `g-tags-size-${this.size}`
		},
		Cpu_type(){
			return `g-tags-type-${this.type}`
		},
		Cpu_boder(){
			if(this.boder){
				return `g-tags-type-${this.type}-boder`
			}
		},
		Cpu_circle(){
			if(this.circle){
				return `g-tags-circle`
			}
		},
	},
	methods: {
		deltag(){
			//点击删除
			this.clear&&(
			this.$emit("clear"))
		},
	},
	created() {
		
	}
};
</script>
<style lang="scss">
	@import "../../theme.scss";
	@import "../../iconfont.css";
	@mixin type($color){
		background:$color;
		color: #FFFFFF;
		border: 2rpx solid $color;
		&-boder{
			background:#FFFFFF;
			color:$color;
		}
	}
	.g-tags-content{
		&-icon{
			margin-right: 4rpx;
		}
	}
	.g-tags-del{
		width: 30rpx;
		height: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		color: #FFFFFF;
		top: -10rpx;
		right: -15rpx;
		border-radius: 50%;
		background: $g-text-dark;
		font-size: 12rpx;
		&-mini{
			transform: scale(0.8);
		}
	}
	.del-empty-height{
		height: 9rpx;
	}
	.g-tag-wrap{
		min-width: 0rpx;
		display: inline-block;
	}
	.g-tags{
		position: relative;
		display: flex;
		align-items: center;
		border-radius: 4rpx;
		&-circle{
			border-radius: 100rpx;
		}
		&-type{
			&-primary{
				@include type($g-main-primary)
			}
			&-success{
				@include type($g-main-success)
			}
			&-warning{
				@include type($g-main-warning)
			}
			&-danger{
				@include type($g-main-danger)
			}
			&-info{
				//info颜色太浅
				@include type($g-boder-grey)
			}
		}
		&-size{
			&-mini{
				height:44rpx;
				padding:0 10rpx;
				font-size: 24rpx;
			}
			&-middle{
				height:48rpx;
				padding:0 20rpx;
				font-size: 28rpx;
			}
			&-large{
				height:58rpx;
				padding:0 24rpx;
				font-size: 28rpx;
			}
		}
	}
</style>
